<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Electron in Magnetic Field</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="600"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General settings
        const cx = canvas.width / 2;
        const cy = canvas.height / 2;
        const R = 180; // Average radius
        const trackWidth = 60;
        const R_outer = R + trackWidth / 2;
        const R_inner = R - trackWidth / 2;

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.font = 'italic 28px serif';

        // --- Helper function to draw an arrow ---
        function drawArrow(x, y, angleRad, size) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(angleRad);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, -size / 2);
            ctx.lineTo(-size, size / 2);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }

        // 1. Draw the two solid circles (the spiral ring)
        ctx.beginPath();
        ctx.arc(cx, cy, R_outer, 0, 2 * Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(cx, cy, R_inner, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw the dashed circular path of the electron
        ctx.save();
        ctx.setLineDash([10, 8]);
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.restore();

        // 3. Draw the arrows indicating counter-clockwise motion
        // Arrow 1 (top-left)
        let angle1 = 140 * Math.PI / 180;
        let x1 = cx + R * Math.cos(angle1);
        let y1 = cy + R * Math.sin(angle1);
        let tangent1 = angle1 + Math.PI / 2;
        drawArrow(x1, y1, tangent1, 15);

        // Arrow 2 (bottom-right)
        let angle2 = 320 * Math.PI / 180;
        let x2 = cx + R * Math.cos(angle2);
        let y2 = cy + R * Math.sin(angle2);
        let tangent2 = angle2 + Math.PI / 2;
        drawArrow(x2, y2, tangent2, 15);

        // 4. Draw the center point
        ctx.beginPath();
        ctx.arc(cx, cy, 4, 0, 2 * Math.PI);
        ctx.fill();

        // 5. Draw the radius line and label R
        ctx.save();
        ctx.setLineDash([10, 8]);
        let radiusAngle = 215 * Math.PI / 180;
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + R_inner * Math.cos(radiusAngle), cy + R_inner * Math.sin(radiusAngle));
        ctx.stroke();
        ctx.restore();
        
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        let labelRx = cx + (R / 2) * Math.cos(radiusAngle + 0.3);
        let labelRy = cy + (R / 2) * Math.sin(radiusAngle + 0.3);
        ctx.fillText('R', labelRx, labelRy);

        // 6. Draw point P and the injection angle
        let pAngle = -12 * Math.PI / 180;
        let px = cx + R * Math.cos(pAngle);
        let py = cy + R * Math.sin(pAngle);

        // Point P
        ctx.beginPath();
        ctx.arc(px, py, 6, 0, 2 * Math.PI);
        ctx.fill();

        // Label P
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';
        ctx.fillText('P', px + 10, py + 10);
        
        // Angle lines and arc
        let alpha0_visual = 20 * Math.PI / 180;
        let lineLength = 50;
        let arcRadius = 40;

        ctx.save();
        ctx.setLineDash([8, 6]);
        // Line 1
        ctx.beginPath();
        ctx.moveTo(px, py);
        ctx.lineTo(px + lineLength * Math.cos(pAngle - alpha0_visual), py + lineLength * Math.sin(pAngle - alpha0_visual));
        ctx.stroke();
        // Line 2
        ctx.beginPath();
        ctx.moveTo(px, py);
        ctx.lineTo(px + lineLength * Math.cos(pAngle + alpha0_visual), py + lineLength * Math.sin(pAngle + alpha0_visual));
        ctx.stroke();
        
        // Arc for the angle
        ctx.beginPath();
        ctx.arc(px, py, arcRadius, pAngle - alpha0_visual, pAngle + alpha0_visual);
        ctx.stroke();
        ctx.restore();

        // Label 2α₀
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        let labelAngleX = px + (arcRadius + 15) * Math.cos(pAngle);
        let labelAngleY = py + (arcRadius + 15) * Math.sin(pAngle);
        // Using Unicode for alpha (α) and subscript zero (₀)
        ctx.fillText('2\u03B1\u2080', labelAngleX, labelAngleY);
    </script>
</body>
</html>